<template>
<!--滚动横幅底部-->
<div class="p-hero-wrap section">
    <div class="container" style="border-bottom-color: rgb(231,231,231);">
        <div class="line-container">
            <ul class="p-hero-nav clearfix">
                <div class="kingkong-column" style="min-height: 0px;">
                    <li class="m-tag-a" data-target="_blank" data-src="">
                        <div class="m-product-image-container undefined" data-src=""
                            style="width: 116px; height: 116px;">
                            <div class="img-container" style="width: 116px;height: 116px;">
                                <img src="https://img.youpin.mi-img.com/ferriswheel/f20994ad_ad14_4a06_b60e_099011cf99ec.png?w=180&h=180">
                            </div>
                        </div>
                                <p class="title" style="color: rgb(0,0,0);">上新精选</p>
                    </li>
                </div>
                <div class="kingkong-column" style="min-height: 0px;">
                    <li class="m-tag-a" data-target="_blank" data-src="">
                        <div class="m-product-image-container undefined" data-src=""
                            style="width: 116px; height: 116px;">
                            <div class="img-container" style="width: 116px;height: 116px;">
                                <img src="https://img.youpin.mi-img.com/ferriswheel/471a4696_514e_4755_b72b_097a515fd4ff.png?w=180&h=180">
                            </div>
                        </div>
                                <p class="title" style="color: rgb(0,0,0);">小米众筹</p>
                    </li>
                </div>
                <div class="kingkong-column" style="min-height: 0px;">
                    <li class="m-tag-a" data-target="_blank" data-src="">
                        <div class="m-product-image-container undefined" data-src=""
                            style="width: 116px; height: 116px;">
                            <div class="img-container" style="width: 116px;height: 116px;">
                                <img src="https://img.youpin.mi-img.com/ferriswheel/faeedd99_bac0_4172_aacf_a58bf1483e57.png?w=180&h=180">
                            </div>
                        </div>
                                <p class="title" style="color: rgb(0,0,0);">有品秒杀</p>
                    </li>
                </div>
                <div class="kingkong-column" style="min-height: 0px;">
                    <li class="m-tag-a" data-target="_blank" data-src="">
                        <div class="m-product-image-container undefined" data-src=""
                            style="width: 116px; height: 116px;">
                            <div class="img-container" style="width: 116px;height: 116px;">
                                <img src="https://img.youpin.mi-img.com/ferriswheel/28cc56b2_81e5_4b9c_a765_aef6ab316fbc.png?w=180&h=180">
                            </div>
                        </div>
                                <p class="title" style="color: rgb(0,0,0);">生活优选</p>
                    </li>
                </div>
                <div class="kingkong-column" style="min-height: 0px;">
                    <li class="m-tag-a" data-target="_blank" data-src="">
                        <div class="m-product-image-container undefined" data-src=""
                            style="width: 116px; height: 116px;">
                            <div class="img-container" style="width: 116px;height: 116px;">
                                <img src="https://img.youpin.mi-img.com/ferriswheel/20a987b8_9077_4393_bfd4_efb3e62cbadb.png?w=180&h=180">
                            </div>
                        </div>
                                <p class="title" style="color: rgb(0,0,0);">小米自营</p>
                    </li>
                </div>
             </ul>
        </div>
    </div>
</div>


</template>

<script>

</script>

<style lang="less" scoped>
//滚动横幅下导航栏
div .p-hero-wrap .container{
    padding-top: 30px;
    border-bottom-width: 1px;
    border-bottom-style:solid;
    overflow: hidden;
}
.container{
    width: 1080px;
    margin:0 auto;
}
div .p-hero-wrap .container .line-container{
    display: inline-block;
}
div .p-hero-wrap .p-hero-nav{
    overflow: hidden;
    padding-bottom: 10px;
}
.clearfix{

}
div .p-hero-wrap .p-hero-nav .kingkong-column:first-child{
    margin-left: 28px;
}
div .p-hero-wrap .p-hero-nav .kingkong-column{
    width: 116px;
    height: 100%;
    min-height: 277px;
    display: inline-block;
    margin-right: 110px;
}
div .p-hero-wrap .p-hero-nav li:last-child{
    margin-right: 0;
}
div .p-hero-wrap .p-hero-nav li{
    float: left;
    width: 116px;
}
.m-tag-a{
    cursor: pointer;
}
.m-product-image-container{
    overflow: hidden;
}
.m-product-image-container .img-container{
    overflow: hidden;
    display: inline-block;

}
div .p-hero-wrap .p-hero-nav img{
    width: 116px;
    height: 116px;
}
img{
    vertical-align: middle;
    border: none;
}
img{
    overflow-clip-margin: content-box;
    overflow: clip;
}
div .p-hero-wrap .p-hero-nav li .title{
    font-size: 14px;
    margin-top: 4px;
    width: 116px;
    text-align: center;
    color: #999;
}
.title{
    margin-right: 6px;
}

</style>